/**
* @file index.scss
* @synopsis  商城首页
* @version 1.0.0
*/

@import "common/common";
@import "common/slider/slider";
@import "common/dialog/dialog";

@mixin text-overflow{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

%color-txt{
	color: #e29323;
}

%btn-act{
	border-color: #2cb967;
	color: #2cb967;
}

%btn-disabled{
	border-color: #e2e2e2;
	color: #e2e2e2;
}

%bg{
	background-color: #fff;
}

.mod-slider{
	height: rem(450);
	overflow: hidden;
	img{
		display: block;
		width: 100%;
		height: rem(450);
	}
}

.mod-msg{
	padding-top: rem(20);
	margin-bottom: rem(20);
	@extend %bg;
	h2{
		font-size: rem(32);
		color: #333;
		line-height: rem(50);
		margin: 0 rem(20);
	}
	.goods-pri{
		margin: rem(10) rem(20) 0;
		.pri{
			font-size: rem(40);
			font-weight: 400;
			@extend %color-txt;
		}
		.num{
			font-size: rem(28);
			color: #333;
			em{
				@extend %color-txt;
				font-style: normal;
			}
		}
	}
}

.mod-active{
	background-color: #fbf9f6;
	.mod-act-item{
		height: rem(68);
		line-height: rem(68);
		border-bottom: 1px solid #efece7;
		font-size: rem(24);
		color: #666;
		padding: 0 rem(22);
		&:last-child{
			border-bottom: none;
		}
		.act-tag{
			padding: rem(5) rem(15);
			font-size: rem(20);
			color: #e29323;
			border: 1px solid #e29323;
			border-radius: 5px;
			margin-right: rem(10);
			vertical-align: middle;
		}
	}
}

.mod-spec{
	margin-bottom: rem(20);
	overflow: hidden;
	.spec-list{
		padding: rem(20);
		border-bottom: 1px solid #f3f4f6;
		// line-height: rem(88);
		min-height: rem(48);
		// line-height: rem(40);
		background-color: #fff;
		@include flexbox((display: box));
		label{
			display: block;
			font-size: rem(28);
			color: #999;
		}
		span{
			display: block;
			width: 100%;
			font-size: rem(28);
			color: #333;
			@include flexbox((box-flex: 1.0));
		}
		textarea{
			width: 100%;
			display: block;
		}
	}
}

.mod-buy-num{
	background-color: #fff;
	height: rem(88);
	line-height: rem(88);
	padding: 0 rem(20);
	@include flexbox((display: box));
		label{
			display: inline-block;
			font-size: rem(28);
			color: #999;
			vertical-align: middle;
		}
		.mod-num{
			display: block;
			width: 100%;
			font-size: rem(28);
			color: #333;
			@include flexbox((box-flex: 1.0));
				span{
					display: inline-block;
					width: rem(44);
					height: rem(44);
					line-height: rem(38);
					font-size: rem(40);
					background-color: #ebebeb;
					color: #ccc;
					font-weight: 700;
					text-align: center;
					vertical-align: middle;
					&:hover{
						background-color: #ccc;
						color: #969696;
					}
				}
				input{
					display: inline-block;
					padding: 0 rem(10);
					width: rem(54);
					height: rem(44);
					background-color: #ebebeb;
					border: none;
					vertical-align: middle;
					text-align: center;
					&:disabled{
						opacity: 1;
					}
				}
			}
}

.mod-details{
	margin-top: rem(20);
	margin-bottom: rem(100);
	height: 100%;
	@extend %bg;
	.title{
		height: rem(80);
		line-height: rem(80);
		text-align: center;
		border-bottom: 1px solid #f3f4f6;
		background: url(../../../image/goods-title.png) no-repeat center center;
		span{
			display: inline-block;
			padding: 0 rem(10);
			background-color: #fff;
			position: relative;
			z-index: 1;
			margin-top: rem(-10);
			font-size: rem(28);
			color: #3abe71;
		}
	}
	.details{
		img{
			max-width: 100%;
		}
	}
}

.tab-panel{
	display: none;
}
.show-details{
	display: block;
}

.mod-btn{
	position: fixed;
	width: 100%;
	bottom:0;
	left: 0;
	z-index: 10;
	background-color: #fff;
	height: rem(90);
	line-height: rem(86);
	@include flexbox((display: box));
	.price{
		@include flexbox((box-flex: 1.0));
		display: block;
		width: 100%;
		font-size: rem(20);
		color: #e59d3c;
		text-align: center;
		span{
			font-size: rem(38);
			color: #e59d3c;
			font-weight: 700;
		}
	}
	.ui-button{
		display: block;
		width: 100%;
		display: block;
		text-align: center;
		color: #fff;
		font-size: rem(34);
		background-color: #30ba6a;
		border: none;
		@include flexbox((box-flex: 1.0));
	}
}

.mod-list{
	// @include box;
	height: rem(65);
	margin-bottom: rem(20);
	background-color: #fff;
	padding-top: rem(15);
	overflow-x: auto;
	white-space:nowrap;
	text-align: center;
	-webkit-text-size-adjust:none;
	font-size: 0;
	margin-top: rem(20);
	overflow-y: hidden;
    .tab{
		// @include flex-box;
		display: inline-block;
		// width: rem(250);
		padding: 0 rem(40);
		margin: 0 auto;
		text-align: center;
		overflow: hidden;
		.title{
			font-size: rem(32);
			color: #666;
			font-weight: 700;
		}
		.line{
			width: rem(30);
			height: rem(4);
			background-color: #2cb967;
			display: block;
			margin: 0 auto;
			opacity: 0;
		}
    }
    .active{
		.title{
			color: #2cb967;
		}
		.line{
			opacity: 1;
		}
	}
}

.mod-sign{
	width: rem(600);
	.title{
		font-size: rem(28);
		color: #999;
		border-bottom: 1px solid #ccc;
		padding: 0 0 rem(10);
		span{
			margin-right: rem(20);
		}
	}
	.price-details{
		color: #666;
		font-size: rem(28);
		padding: rem(10) 0;
	}
	.desc{
		font-size: rem(28);
		color: #999;
		padding: rem(20) 0;
	}
	em{
		font-style: normal;
		color: #e59d3c;
	}
}

.mod-buy{
	font-size: rem(32);
	padding: rem(10) 0 rem(20);
	color: #555;
	label{
		margin: 0 rem(20);
	}
	span{
		vertical-align: middle;
	}
	input{
		width: rem(30);
		height: rem(30);
		margin-right: rem(10);
		vertical-align: middle;
		border: none;
	}
}

.mod-box{
	display: none;
}
